<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/include.js"></script>
    <script src="/plugs/vue/vue-treeselect.umd.min.js"></script>
    <link rel="stylesheet" href="/plugs/vue/vue-treeselect.min.css">
    <script src="http://base-admin.oss-cn-beijing.aliyuncs.com/js/publicEnums.js?v=1.2"></script>
</head>
<body>
    <div id="app">
        <table>
            <tr>
                <td>
                    <treeselect v-model="searchForm.departmentId" :options="departmentTree" placeholder="所属部门" style="width: 200px;"/>
                </td>
                <td>
                    <el-input v-model="searchForm.name" size="small" placeholder="名称模糊搜索" clearable style="width: 200px;"></el-input>
                </td>
                <td>
                    <el-select v-model="searchForm.status" size="small" clearable placeholder="状态">
                        <el-option
                                v-for="item in statuses"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </td>
                <td>
                    <button @click="search" type="button" class="el-button filter-item el-button--success el-button--small">
                        <i class="el-icon-search"></i><span>搜索</span>
                    </button>
                </td>
                <td>
                    <button v-if="showButtonAdd" @click="toAdd" type="button" class="el-button el-button--primary el-button--small">
                        <i class="el-icon-plus"></i><span>新增</span>
                    </button>
                </td>
            </tr>
        </table>

        <div style="margin-top: 5px;">
            <el-table
                    :data="tableData"
                    style="width: 100%;margin-bottom: 20px;"
                    v-loading="loading">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="名称">
                </el-table-column>
                <el-table-column
                        label="所属部门">
                    <template slot-scope="scope">
                        {{getDepartmentName(scope.row.departmentId)}}
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.status"
                                active-color="#13ce66"
                                :active-value="1"
                                :inactive-value="0"
                                inactive-color="#C0CCDA"
                                @change="changeStatus($event,scope.row,scope.$index)">
                        </el-switch>
                    </template>
                </el-table-column>
                <!--<el-table-column label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status" class="el-tag el-tag&#45;&#45;success el-tag&#45;&#45;small el-tag&#45;&#45;light">启用</span>
                        <span v-else class="el-tag el-tag&#45;&#45;warning el-tag&#45;&#45;small el-tag&#45;&#45;light">禁用</span>
                    </template>
                </el-table-column>-->
                <el-table-column
                        label="创建时间">
                    <template slot-scope="scope">
                        {{scope.row.createdTime | dateTimeFormat('yyyy-MM-dd HH:mm:ss')}}
                    </template>
                </el-table-column>

                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button v-if="showButtonUpdate" @click="toModify(scope.row)" type="primary" icon="el-icon-edit" size="mini" title="修改"></el-button>
                        <template v-if="scope.row.children == null">
                            <el-button v-if="showButtonDelete" type="danger" icon="el-icon-delete" size="mini" title="删除" @click="del(scope.row.id)"></el-button>
                        </template>
                    </template>

                </el-table-column>

            </el-table>

            <my-el-pagination :total="pg.total" @pagination_change="pagination_change" :page_index="pg.pageNum"></my-el-pagination>
        </div>



        <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                :close-on-click-modal="false"
                width="55%">

            <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px" class="demo-editForm">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio v-for="item in statuses" v-model="editForm.status" :label="item.value">{{item.label}}</el-radio>
                </el-form-item>
                <el-form-item label="所属部门">
                    <treeselect v-model="editForm.departmentId" :options="departmentTree" placeholder="所属部门"/>
                </el-form-item>

            </el-form>


            <span slot="footer" class="dialog-footer">
                &nbsp;
                <el-button type="primary" @click="submitForm">确 定</el-button>
                &nbsp;
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>

    </div>
</body>
<script>
    Vue.component('treeselect', VueTreeselect.Treeselect);
    let switchEnum = MY_ENUM.getElOptions("Switch").sort(COMPARE_DESC("value"));
    let vm = new Vue({
        el: '#app',
        data: {
            pg:{

            },
            tableData: [],
            searchForm: {
                pageNum: 1,
                pageSize: DEFAULT_PAGE_SIZE,
                name: "",
                departmentId: null,
                status: null
            },
            dialogVisible: false,
            dialogTitle: "",
            editForm: {},
            rules: {
                name: [{required: true, trigger: 'blur', message: '名称不能为空'}],
            },
            loading: false,
            statuses: switchEnum,
            departmentTree: [],
            departments: []
        },
        methods: {
            pagination_change (item) {
                this.searchForm.pageNum = item.pageNum;
                this.searchForm.pageSize = item.pageSize;
                this.loadTableData();
            },
            submitForm() {
                let that = this;
                myConfirm("确定提交？", function () {
                    showLoading("保存中....");
                    let url = BASE_PATH + "/position/update";
                    if (that.editForm.id === undefined || that.editForm.id === "") {
                        url = BASE_PATH + "/position/add";
                    }
                    Vue.delete(that.editForm, "createdTime");

                    myAjax({
                        type: "post",
                        url: url,
                        data: that.editForm,
                        isJson: true,
                        callback: function () {
                            hideLoading();
                            successMessage("提交成功！");
                            that.dialogVisible = false;
                            that.loadTableData();
                        }
                    })
                });
            },
            search() {
                this.searchForm.pageNum = 1;
                this.loadTableData();
            },
            loadTableData() {
                let that = this;
                this.loading = true;
                myAjax({
                    type: "get",
                    url: BASE_PATH + "/position/list",
                    data: {
                        pageNum: that.searchForm.pageNum,
                        pageSize: that.searchForm.pageSize,
                        name: this.searchForm.name,
                        departmentId: this.searchForm.departmentId,
                        status: this.searchForm.status
                    },
                    callback: function (data) {
                        that.pg = data;
                        that.tableData = toTree(data.list);
                        that.loading = false;
                    }
                });
            },

            toModify(obj) {
                this.dialogTitle = "编辑职位";
                this.editForm = JSON.parse(JSON.stringify(obj));
                // this.loadDepartmentTree();
                this.dialogVisible = true;
            },
            toAdd(obj) {
                this.dialogTitle = "新增职位";
                this.editForm = {
                    id: "",
                    name: "",
                    status: this.statuses[0].value
                };
                this.dialogVisible = true;
            },
            del(id) {
                let that = this;
                myConfirm("确定删除？", function () {
                    showLoading("保存中....");
                    let settings = {
                        type: "post",
                        url: BASE_PATH + "/position/delete",
                        data: {id: id},
                        callback: function () {
                            hideLoading();
                            successMessage("删除成功！");
                            that.loadTableData();
                        }
                    };
                    myAjax(settings);
                });

            },
            loadDepartmentTree() {
                let that = this;
                showLoading("加载部门中...");
                myAjax({
                    type: "get",
                    url: BASE_PATH + "/department/list",
                    callback: function (data) {
                        that.departments = data;

                        // 添加label属性 把name值赋给他
                        for (let i = 0; i < data.length; i++) {
                            data[i].label = data[i].name;
                        }
                        that.departmentTree = toTree(data);
                        hideLoading();
                    }
                });
            },
            getDepartmentName(val) {
                for (let i = 0; i < this.departments.length; i++) {
                    if (this.departments[i].id === val) {
                        return this.departments[i].name;
                    }
                }
            },
            changeStatus(e,row,index) {
                let mes = "";
                let that = this;
                myConfirm(mes + "确定禁用？", function () {
                    showLoading("提交中...");
                    myAjax({
                        type: "post",
                        url: BASE_PATH + "/position/update",
                        data: row,
                        isJson: true,
                        callback: function () {
                            hideLoading();
                            successMessage("提交成功！");
                            that.loadTableData();
                        },
                        errorCallback: function (error) {
                            errorMessage(error.responseJSON.message);
                            that.reSetStatus (e, row, index);
                        }
                    })
                }, function () {
                    that.reSetStatus (e,row, index);
                });
            },
            reSetStatus (e, row, index) {
                let that = this;
                let newData = row;
                newData.status = newData.status === 1 ? 0 : 1;//恢复 原状态
                that.tableData[index] = newData;
            }
        },
        created: function () {
            this.loadTableData();
            this.loadDepartmentTree();
            this.showButtonAdd = parent.checkPermissionByName("职位添加");
            this.showButtonUpdate = parent.checkPermissionByName("职位修改");
            this.showButtonDelete = parent.checkPermissionByName("职位删除");
        },
    });
</script>
</html>
